<template>
	<div class="todolist-page">
		<div class="title">
			<h1>Todos</h1>
		</div>
		<div class="content">
			<addlist @setlist="getSubmit"></addlist>
			<showlist :tlist="arr" @setshowlist="getshowlist"></showlist>
			<div class="footer">
				<span class="num">{{ arr.length - getNum }}</span>
				<span class="allDel" @click="alldel" for="checkbox">Clear {{ getNum }} completed item</span>
			</div>
		</div>
	</div>
</template>

<script>
	import addlist from './addlist.vue'
	import showlist from './showlist.vue'
	import { recycling } from '@/api/api.js'
	
	export default {
		name: 'TODO',
		components: { addlist, showlist },
		data() {
			return {
				addtitle: '',
				arr: []
			}
		},
		computed: {
			getNum(){
				let delNum = 0
				this.arr.forEach(item => {
					if(item.check) {
						delNum++
					}
				})
				return delNum
			}
		},
		methods: {
			// 新增事件
			getSubmit(val) {
				if(val) {
					this.arr.push(val)
				}
			},
			// 删除选中事件
			alldel() {
				let delArr = []
				this.arr.forEach((item,index) => {
					// 把未选中的 item 追加到临时数组中
					if(!item.check) {
						delArr.push(item)
					}
				})
				// 把临时数组赋给 arr
				this.arr = [...delArr]
			},
			// 获取 arr 数据
			getshowlist(val) {
				this.arr = [...val]
			},
			// getDataInfo() {
			// 	recycling({key:'0053a24e3a76ef904be53fdba2b2b2b7', imgurl: 'base64'}).then((res) => {
			// 		// console.log(res)
			// 	})
			// }
		},
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	html,body{
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 1.4em;
		background: #eeeeee;
		color: #333333;
	}
	[v-cloak] {
		display: none;
	}
	.todolist-page{
		width: 480px;
		margin: 0 auto 40px;
		background: white;
		padding: 20px;
		box-shadow: rgb(0 0 0 / 20%) 0 5px 6px 0;
	}
	.title{
		width: 100%;
		text-align: center;
		font-family: inherit;
		color: #333333;
		line-height: 1.4em;
		font-size: 1.4em;
		font-weight: bold;
		text-align: center;
		padding: 20px 0 30px 0;
	}
	#create-todo{
		position: relative;
	}
		
	#new-todo{
		width: 466px;
		font-size: 24px;
		font-family: inherit;
		line-height: 1.4em;
		outline: none;
		padding: 6px;
		border: 1px solid #999999;
		box-shadow: rgb(0 0 0 / 20%) 0 1px 2px 0 inset;
	}
	.todo-list{
		list-style: none;
	}
	li{
		/* padding: 12px 0 11px 0; */
		position: relative;
		font-size: 24px;
		line-height: 50px;
		border-bottom: 1px solid #cccccc;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 50px;
		padding: 5px 0;
	}
	.titleBox{
		width: 100%;
		height: 100%;
	}
	.userTitle{
		width: 100%;
		height: 100%;
		padding: 0 10px;
		box-sizing: border-box;
		outline: none;
	}
	.dbTitle{
		width: 100%;
		height: 100%;
		padding: 0 10px;
		outline: none;
		border: none;
		box-sizing: border-box;
		box-shadow: inset 0px 0px 4px #999;
		font-size: 24px;
		color: #333333;
	}
	.text{
		padding-left: 10px;
	}
	.h-text{
		padding-left: 10px;
		text-decoration: line-through;
		color: #777777;
	}
	.close{
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 50px;
		background: #CCCCCC;
		color: #FFFFFF;
		display: none;
		text-align: center;
		margin-left: auto;
		cursor: pointer;
	}
	li:hover .close{
		display: block;
	}
	.close:hover{
		background: #333333;
		
	}
	.footer{
		padding-top: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.num{
		font-weight: bold;
	}
	.num::after{
		content: ' items left.';
		color: #777777;
		font-weight: normal;
	}
	.allDel{
		color: #777777;
		text-decoration: underline;
		/* display: none; */
		cursor: pointer;
	}
	.dp-b{
		display: block;
	}
</style>
